<template>
  <div>
 <div class="banner"> 
   <div class="wrapper"> 
    <img src="~/assets/img/page-banner.png" alt="" /> 
   </div> 
  </div> 
  <!--两列布局--> 
  <div class="wrapper tag-item"> 
   <div class="fl left-list"> 
    <p class="full-info">为了获取更好的体验 请 <a href="makeFriends-edit.html" target="_blank">完善兴趣信息</a><span class="sui-icon icon-tb-close close"></span></p> 
    <div class="friend-dating-list"> 
     <ul class="friends"> 
      <li class="friend-item" v-for="(item,index) in friendList" :key="index" > 
       <div class="fl photo"> 
        <span class="cafe-more"></span> 
        <div class="img">
         <img :src="item.pic" alt="" height="148"  width="239"/>
        </div> 
        <div class="tag"> 
         <span class="tag-cafe cafe"><i class="fa fa-coffee" aria-hidden="true"></i> {{item.activity}}</span> 
        </div> 
       </div> 
       <div class="fl content"> 
        <p class="title"> <span class="name">{{item.nickname}}</span> 邀你一起 <span class="cafe">喝咖啡</span> <b class="bold">匹配度 96%</b> </p> 
        <p class="aa"> <span class="money"> {{item.age}}岁 | {{item.constellation}} | 教育 | 软件工程师</span> </p> 
        <p class="point"> 他刚刚分享了{{item.id}}文章</p> 
        <p class="desc"> 推荐理由：你们共同关注PHP、Python 等 5 个标签，都关注 XXX 活动。</p> 
       </div> 
       <div class="fr xy"> 
        <ul> 
         <li><i class="like sui-icon icon-tb-like" @click="like(item.id,1)"  @mouseover="changeActive($event)" @mouseout="removeActive($event)"></i></li> 
         <li><i class="close sui-icon icon-tb-roundclose" @click="like(item.id,0)"  @mouseover="changeClose($event)" @mouseout="removeClose($event)"></i></li> 
         <li><router-link to="/friends/friendList" tag="i" class="message sui-icon icon-tb-comment"></router-link></li> 
        </ul> 
       </div> 
       <div class="clearfix"></div> 
      </li>       
     </ul>      
    </div> 
   </div> 
   <div class="fl right-tag"> 
    <div class="friend-info-card"> 
     <div class="card"> 
      <div class="photo-name"> 
       <img src="~/assets/img/widget-photo.png" alt="" /> 
       <div class="name-edit"> 
        <p><span class="name">用户名</span> <span class="edit">编辑兴趣资料</span></p> 
        <p>认证</p> 
       </div> 
       <div class="clearfix"></div> 
      </div> 
      <div class="like"> 
       <span class="like1">喜欢　<i class="num">400</i></span> 
       <span>被喜欢　<i class="num">5</i></span> 
      </div> 
     </div> 
    </div> 
    <div class="block-btn"> 
     <p>约一约有趣的人，会一会好的时光！</p> 
     <a class="sui-btn btn-block btn-share" href="~/assets/makeFriends-submit.html" target="_blank">发布约会</a> 
    </div> 
    <div class="rank"> 
     <div class="head"> 
      <h3 class="title">排行榜</h3> 
     </div> 
     <div class="rank-list"> 
      <ul class="rank"> 
       <li> <span class="fl dating">喝咖啡</span> <span class="fr cafe">102258</span> </li> 
       <li> <span class="fl dating">吃饭</span> <span class="fr eat">9878</span> </li> 
       <li> <span class="fl dating">看电影</span> <span class="fr movie">2564</span> </li> 
       <li> <span class="fl dating">旅行</span> <span class="fr travel">897</span> </li> 
      </ul> 
     </div> 
    </div> 
    <div class="friend-line-card"> 
     <div class="card"> 
      <p>找个合适的参加一场线下活动</p> 
     </div> 
    </div> 
    <div class="friend-line-card"> 
     <div class="card"> 
      <p>找个合适的参加一场线下活动</p> 
     </div> 
    </div> 
   </div> 
   <div class="clearfix"></div> 
  </div> 
  </div>
</template>
<script>
import '~/assets/css/page-sj-makeFriends-index.css'
import friendApi from '@/api/friend'
export default {
  asyncData ({ params, error }) {
    return friendApi.list().then( res=>{
      return {friendList: res.data.data }
    })
  },
  data(){
    return{

    }
  },
  methods:{
     like(id,type){
      friendApi.like(id,type).then(  res=>{
          for(let i=0;i<this.friendList.length;i++){
              if(this.friendList[i].id===id){
                this.friendList.splice(i,1)
              }
          }          
          this.friendList.push(res.data.data)
      })
    },  
    changeActive($event){
        $event.currentTarget.className="like sui-icon icon-tb-likefill";
     },
     removeActive($event){
        $event.currentTarget.className="like sui-icon icon-tb-like";
     },
     changeClose($event){
        $event.currentTarget.className="close sui-icon icon-tb-roundclosefill";
     },
     removeClose($event){
        $event.currentTarget.className="close sui-icon icon-tb-roundclose";
     }
  }
}
</script>